import 'package:flutter/material.dart';

class FlutterLayoutPage extends StatefulWidget {
  @override
  _FlutterLayoutPageState createState() => _FlutterLayoutPageState();
}

class _FlutterLayoutPageState extends State<FlutterLayoutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter布局相关组件'),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              ClipOval(
                child: SizedBox(
                  width: 100,
                  height: 100,
                  child: Image.network('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=667972707,1091144891&fm=26&gp=0.jpg',fit: BoxFit.cover,),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(15)),
                  child: Opacity(
                    opacity: 0.4,
                    child: Image.network(
                      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4173661243,99164166&fm=26&gp=0.jpg',
                      width: 100, height: 100,fit: BoxFit.cover,),
                  ),
                ),
              ),
            ],
          ),
          Divider(),
          Container(
            height: 150,
            margin: EdgeInsets.all(15),
            child: PhysicalModel( //布局裁剪，阴影效果等功能
              color: Colors.transparent,
              borderRadius: BorderRadius.circular(10),
              clipBehavior: Clip.hardEdge,
              elevation: 20,
              child: PageView(
                children: <Widget>[
                  Container(
                    color: Colors.pinkAccent,
                    child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587205655461&di=a84ee5077160cc354429e0beb26edaf9&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F562c11dfa9ec8a132ff6be36f503918fa1ecc07c.jpg',fit: BoxFit.fitHeight,),
                  ),
                  Container(
                    color: Colors.lightGreenAccent,
                    child:Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587205655460&di=f5b87f3c5ffdb89d4caa0b10150054d3&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F3bf33a87e950352a2f5c61b85643fbf2b2118b45.jpg',fit: BoxFit.fitHeight,),
                  ),
                  Container(
                    color: Colors.grey,
                    //child: Image.network('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=163076231,2278769768&fm=15&gp=0.jpg',fit: BoxFit.fitHeight,),
                    child: Image.asset('index2.jpg'),
                  ),
                ],
              ),
            ),
          ),
          Divider(),
          Column(
            children: <Widget>[
              FractionallySizedBox(
                widthFactor: 1,
                child: Container(
                  color: Colors.grey,
                  child: Text('宽带撑满'),
                ),
              )
            ],
          ),
          Divider(),
          Wrap(
            spacing: 8,
            runSpacing: 6,
            children: <Widget>[
              _chip('label'),
              _chip('金子'),
              _chip('美穗'),
              _chip('美女'),
              _chip('漂亮'),
              _chip('可爱'),
              _chip('喜欢'),
            ],
          )
        ],
      ),
    );
  }
  Widget _chip(String label) {
    return Chip(label: Text(label)
    , avatar: ClipOval(
        child: Image.network('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=163076231,2278769768&fm=15&gp=0.jpg',fit: BoxFit.cover,width: 50,height: 50,),
      ),
    elevation: 20,);
  }
}
